<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <link rel="stylesheet" href="./index.css" />
</head>

<body>
    <section id="wrap">
        <h2 class="title">百度音乐榜单</h2>
        <ul id="list">
            <li>
                <input type="checkbox" checked="false" />
                <span>第一条信息</span>
                <a href="javascript:;" class="collect">收藏</a>
                <a href="javascript:;" class="cancelCollect">取消收藏</a>
                <a href="javascript:;" class="remove">删除</a>
            </li>
        </ul>
        <footer class="footer">
            <label><input type="checkbox" id="checkAll" />全选/全不选</label>
            <a href="javascript:;" id="remove">删除</a>
            <input type="text" id="newInfo" />
            <a href="javascript:;" id="add">添加</a>
        </footer>
    </section>
    <script>
        var data = [
            {
                id: 0,
                title: "残酷月光 - 费启鸣",
                checked: true,
                collect: true
            }, {
                id: 1,
                title: "兄弟 - 艾热",
                checked: false,
                collect: false
            }, {
                id: 2,
                title: "毕生 - 夏增祥",
                checked: false,
                collect: true
            }, {
                id: 3,
                title: "公子向北去 - 李春花",
                checked: false,
                collect: false
            }, {
                id: 4,
                title: "战场 - 沙漠五子",
                checked: true,
                collect: false //是否收藏 true 收藏 false 没有收藏
            }
        ];


        function renderData(data) {
            document.querySelector("#list").innerHTML = "";
            data.forEach(item => {
                let liEle = document.createElement("li");
                liEle.innerHTML = `<input type="checkbox" class="check" ${item.checked ? 'checked' : ''} />
        <span>${item.title}</span>
        ${item.collect ? '<a href="javascript:;" class="cancelCollect">取消收藏</a>' : '<a href="javascript:;" class="collect">收藏</a>'} 
        <a href="javascript:;" class="remove">删除</a>`;
                document.querySelector("#list").appendChild(liEle)
            })
            addEvent();

            // 判断是否全选；->判断数据
            let isCheckAll = data.every(item => item.checked);
            // console.log(isCheckAll)
            if (isCheckAll) {
                document.querySelector("#checkAll").checked = true;
            } else {
                document.querySelector("#checkAll").checked = false;
            }
        }
        renderData(data);

        function addEvent() {
            // 绑定事件
            let liEles = document.querySelectorAll("#list li");
            // console.log(liEles);
            [...liEles].forEach((item, key) => {

                item.onclick = function (e) {
                    console.log(e.target.className);
                    switch (e.target.className) {
                        case 'check':
                            // console.log("input",e.target.checked)
                            data[key].checked = e.target.checked;
                            break;
                        case 'cancelCollect':
                            // console.log("取消收藏")
                            data[key].collect = false;
                            break;
                        case 'remove':
                            console.log("删除");
                            data.splice(key, 1);
                            break;
                        case 'collect':
                            console.log("收藏")
                            data[key].collect = true;
                            break;
                    }
                    // 渲染视图；
                    renderData(data);
                }
            })


        }


        $('#newTodo').on('keyup', function (e) {
                

                    // 下去写 - 校验用户输入内容,有内容才通过,没有内容直接return
                    var text = $(this).val();
                    if (!text.trim()) { // 如果输入内容为空,就退出  str.trim() 字符串去掉首尾的空格 
                        alert('请输入内容');
                        return
                    }

                    // 修改数据
                    data.push({
                        content: $(this).val(), // 拿到输入框的文本
                        isSelector: false // 默认不选中
                    })
                    console.log('修改之后的数据', data);
                    // 重新渲染
                    renderData(data);
                    // 清空输入框
                    $(this).val('');
                })
          


        // 点击全选/全不选；
        document.querySelector("#checkAll").onclick = function () {
            data.forEach(item => {
                item.checked = this.checked;
            })
            renderData(data);
        }
        //点击全不选
        document.querySelector("#remove").onclick = function () {
            let newData = data.filter(item => !item.checked);
            renderData(newData);
        }

        // 添加功能
        document.querySelector("#add").onclick = function () {
            var addstr = document.getElementById("newInfo").value;
            console.log(data)
            data.push({ "id": 6, "title": addstr, "checked": false, "collect": false });
            console.log(data)
            renderData(data);

        }

    </script>
</body>

</html>